<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.title" placeholder="文章名" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getArticles">查询</el-button>
                </el-form-item>

            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="articleList" stripe highlight-current-row v-loading="listLoading"
                  :row-class-name="tableRowClassName"
                  style="width: 100%;">
            <el-table-column type="selection" width="55"/>

            <el-table-column prop="id" label="id" width="80"/>
            <el-table-column prop="title" label="文章名" width="180"/>
            <el-table-column prop="tags" label="标签" width="80"/>
            <el-table-column prop="summary" label="简介" width="200"/>
            <el-table-column prop="categoryId" label="分类" width="60"/>
            <el-table-column prop="viewNum" label="浏览量 " width="60"/>
            <el-table-column prop="commentNum" label="评论量 " width="80"/>
            <el-table-column prop="createTime" label="创建时间" width="140" :formatter="formatDate" sortable/>

            <el-table-column label="操作" width="160" fixed="right" style="padding-right: 2px">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDel(scope.$index, scope.row)">下架</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" v-on:click="batchRemove" :disabled="this.sels.length===0">批量下架</el-button>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currPage"
                :page-sizes="[10, 20, 50]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                style="float:right;">
            </el-pagination>
        </el-col>

        <!--编辑界面-->
        <el-dialog title="编辑" width="80%" :visible.sync="editFormVisible" :close-on-click-modal="false">
            <el-form :model="editForm" label-width="60px" ref="editForm">
                <el-form-item label="文章名" prop="title">
                    <el-input v-model="editForm.title" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="标签">
                    <el-select v-model="editForm.tags" multiple placeholder="请选择">
                        <el-option
                            v-for="item in tagOptions"
                            :key="item.id"
                            :label="item.tagName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="简介">
                    <el-input type='textarea' v-model="editForm.summary" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="分类">
                    <el-select v-model="editForm.categoryId"  placeholder="请选择">
                        <el-option
                            v-for="item in categoryies"
                            :key="item.id"
                            :label="item.categoryName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="内容">
                    <div class='ql-editor'>
                        <quill-editor ref="myTextEditor" v-model="editForm.content" :options="editorOption">
                        </quill-editor>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="cancleSubmit">取消</el-button>
                <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import {getArticles, updateArticle, saveArticle} from '../../api/vblog/article.js';
    import {getAllCategorys} from '../../api/vblog/category.js';
    import {getAllTags} from '../../api/vblog/tag.js';
    import {getTime} from '../../api/commonUtil';
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import {quillEditor} from 'vue-quill-editor';

    export default {
        data() {
            return {
                filters: {
                    title: '',
                },
                editorOption: {
                    placeholder: 'Hello World'
                },
                articleList: [],
                total: 0,
                currPage: 1,
                pageSize: 10,
                listLoading: false,
                sels: [],//列表选中列
                editFormVisible: false,//编辑界面是否显示
                editLoading: false,
                //编辑界面数据
                editForm: {
                    title: '',
                    tags: [],
                    summary: '',
                    categoryId: '',
                    content: ''
                },
                addFormVisible: false,//新增界面是否显示
                addLoading: false,
                formLabelWidth: '80px',
                tagOptions: [],
                categoryies: [],
            }
        },
        methods: {
            // 隔行换色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            formatDate: function (row, column, cellValue, index) {
                const daterc = row[column.property]
                return daterc == null ? 'null' : getTime(daterc);
            },
            // 切换pageSize
            handleSizeChange(val) {
                this.pageSize = val;
                this.getArticles();
            },
            // 换页
            handleCurrentChange(val) {
                this.currPage = val;
                this.getArticles();
            },
            //获取文章列表
            getArticles() {
                let params = {
                    title: this.filters ? this.filters.title : '',
                    authorId: '',
                    categoryId: '',
                    summary: '',
                    weight: null,
                    currentPage: this.currPage,
                    pageSize: this.pageSize == null ? 10 : this.pageSize,
                };
                this.listLoading = true;
                getArticles(params).then((res) => {
                    if (res != undefined && res.status) {
                        this.$message({
                            message: '加载成功',
                            type: 'success'
                        });
                        if (res.data !== undefined && res.data !== null) {
                            this.total = parseInt(res.data.totalCount);
                            this.currPage = parseInt(res.data.currPage);
                            let articles = res.data.list;
                            articles && articles.map(function (item) {
                                item.tags = item.tags.split(",");
                            })
                            this.articleList = articles
                        } else {
                            this.total = 0;
                            this.articleList = [];
                        }
                    } else {
                        this.listLoading = false;
                        this.$message({
                            message: '加载失败',
                            type: 'error'
                        });
                    }
                    this.listLoading = false;
                });
            },
            //获取分类
            getCategorys() {
                getAllCategorys().then((res) => {
                    if (res != undefined && res.status) {
                        if (res.data !== undefined && res.data !== null) {
                            this.categoryies = res.data.list;
                        } else {
                            this.categoryies = [];
                        }
                    }
                });
            },
            //获取标签
            getAllTags() {
                let params = {
                    tagName: ""
                }
                getAllTags(params).then((res) => {
                    if (res != undefined && res.status) {
                        if (res.data !== undefined && res.data !== null) {
                            this.tagOptions = res.data.list;
                        } else {
                            this.tagOptions = [];
                        }
                    }
                });

            },
            //下架
            handleDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    debugger;
                    var userId = {
                        "userId": row.userId
                    };
                    removeUser(userId).then((res) => {
                        this.listLoading = false;
                        if (res.status) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: '删除失败',
                                type: 'warning'
                            });
                        }
                        this.getArticles();
                    });
                }).catch(() => {
                    this.listLoading = false;
                    this.$message({
                        message: '删除失败',
                        type: 'warning'
                    });
                });
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                this.editFormVisible = true;
                this.editForm = Object.assign({}, row);
                this.getCategorys();
            },
            //显示新增界面
            cancleSubmit: function () {
                this.editFormVisible = false;
                this.editForm.visible = false;
            },
            //编辑提交
            editSubmit: function () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            let para = Object.assign({}, this.editForm);
                            para.tags = JSON.stringify(para.tags)
                            updateArticle(para).then((res) => {
                                this.editLoading = false;
                                this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                                this.$refs['editForm'].resetFields();
                                this.editFormVisible = false;
                                this.getArticles();
                            });
                        });
                    }
                });
            },
            //批量删除
            batchRemove: function () {
                var ids = this.sels.map(item => item.userId).toString();
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let param = {userIds: ids};
                    console.log(ids);
                    batchRemoveUser(param).then((res) => {
                        this.listLoading = false;
                        if (res.status) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: '删除失败',
                                type: 'warning'
                            });
                        }
                        this.getArticles();
                    });
                }).catch(() => {
                    this.listLoading = false;

                });
            }
        },
        computed: {},
        components: {
            quillEditor
        },
        created() {
            this.getArticles();
            this.getAllTags();
            this.getCategorys();

        },
    }

</script>

<style scoped>
    .el-table .warning-row {
        background: oldlace;
    }

    .ql-editor {
        height: 400px;
        border-radius: 4px;
        text-align: center;
        /*display: inline-block;*/
        position: relative;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        /*margin-right: 4px;*/
        /*overflow: hidden;*/
        /*background: #fff;*/
    }

    .demo {
        width: 90%;
        height: 90%;
        line-height: 100px;
        border: 1px solid transparent;
    }

    .demo:hover {
        display: block;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .video-js .vjs-big-play-button {

    }
</style>
